<script lang="ts" setup>
import {propTypes} from '@/utils/propTypes'
import {isNumber} from '@/utils/is'

// eslint-disable-next-line vue/no-reserved-component-names
defineOptions({name: 'Dialog'})

const slots = useSlots()

const props = defineProps({
    modelValue: propTypes.bool.def(false),
    title: propTypes.string.def('Dialog'),
    fullscreen: propTypes.bool.def(true),
    width: propTypes.oneOfType([String, Number]).def('50%'),
    scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
    maxHeight: propTypes.oneOfType([String, Number]).def('300px'),
    appendToBody: propTypes.bool.def(false),
})

const getBindValue = computed(() => {
    const delArr: string[] = ['fullscreen', 'title', 'maxHeight', 'appendToBody']
    const attrs = useAttrs()
    const obj = {...attrs, ...props}
    for (const key in obj) {
        if (delArr.indexOf(key) !== -1) {
            delete obj[key]
        }
    }
    return obj
})

const isFullscreen = ref(false)

const toggleFull = () => {
    isFullscreen.value = !unref(isFullscreen)
}

const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)

watch(
        () => isFullscreen.value,
        async (val: boolean) => {
            // 计算最大高度
            await nextTick()
            if (val) {
                const windowHeight = document.documentElement.offsetHeight
                dialogHeight.value = `${windowHeight - 55 - 60 - (slots.footer ? 63 : 0)}px`
            } else {
                dialogHeight.value = isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight
            }
        },
        {
            immediate: true
        }
)

const dialogStyle = computed(() => {
    return {
        height: unref(dialogHeight)
    }
})
</script>

<template>
    <ElDialog
            :close-on-click-modal="true"
            :fullscreen="isFullscreen"
            :width="width"
            destroy-on-close
            draggable
            lock-scroll
            v-bind="getBindValue"
            :append-to-body="appendToBody"
    >
        <template #header>
            <div class="flex justify-between">
                <slot name="title">
                    {{ title }}
                </slot>
                <Icon
                        v-if="fullscreen"
                        :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
                        class="mr-28px cursor-pointer is-hover mt-12px z-10"
                        color="var(--el-color-info)"
                        @click="toggleFull"
                />
            </div>
        </template>

        <!-- 情况一：如果 scroll 为 true，说明开启滚动条 -->
        <ElScrollbar v-if="scroll" :style="dialogStyle">
            <slot></slot>
        </ElScrollbar>
        <!-- 情况二：如果 scroll 为 false，说明关闭滚动条滚动条 -->
        <slot v-else></slot>

        <template v-if="slots.footer" #footer>
            <slot name="footer"></slot>
        </template>
    </ElDialog>
</template>

<style lang="scss">
.is-hover {
    &:hover {
        color: var(--el-color-primary) !important;
    }
}
</style>
